<template>
	<view class="withdrawal">
		<navBar title="提现"></navBar>

		<view class="header">
			<view class="title">提现到</view>
			<view class="pay_type flex_r_between">
				<view class="left flex_center">
					<image src="/static/public/alipay.png"></image>
					<text class="hidden" @click="$util.toUrl('/pages/store/income/account')" v-if="havaAccount">支付宝账户:{{name}}</text>
					<text @click="$util.toUrl('/pages/store/income/account')" v-else>点击添加收款账号</text>
				</view>
				<u-icon name="arrow-right" color="#666666" size="24rpx"></u-icon>
			</view>
		</view>

		<view class="content">
			<view class="title">支付方式</view>
			<view class="input flex_center" @click="show = true">
				<text>￥</text>
				<i class="line"></i>
				<view :id="money ? '' : 'input-class'">
					{{money || `可提现${balance}元`}}
				</view>
			</view>
		</view>

		<mono-keyboard btnColor="#009FE8" confirmText="提现" :show="show" @change="change" @confirm="confirm"></mono-keyboard>
	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	export default {
		components: {
			navBar,
		},
		data() {
			return {
				show: false,

				money: '',

				name: '',
				account: '',
				havaAccount: false,
				
				balance: '',
			}
		},
		methods: {
			change(e) {
				this.money = e;
			},
			confirm(e) {
				this.show = false;
				this.applyPmReturn();
			},
			getAccount() {
				this.$post('/user_withdrawal/getWithdrawalAccount').then(res => {
					if (res.data.account == null) {
						this.havaAccount = false;
					} else {
						this.havaAccount = true;
						this.account = res.data.account;
						this.name = res.data.name;
					}
				})
			},
			
			applyPmReturn(){
				if(!this.havaAccount){
					return this.$util.msg('请先添加收款账户');
				}
				this.$post('/popularize/applyPmReturn',{
					price: this.money
				}).then(res=>{
					this.$util.msg('已申请，请耐心等待');
				});
			},
			
		},
		
		onLoad(option) {
			// this.getAccount();
			this.balance = option.balance;
		},
		onShow() {
			this.getAccount();
		}
	}
</script>

<style lang="less" scoped>
	.withdrawal {
		padding: 32rpx;
	}

	.header {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 40rpx 32rpx;

		.title {
			font-size: 32rpx;
			color: #131313;
		}

		.pay_type {
			margin-top: 30rpx;
			overflow: hidden;
			.left {
				flex: 1;
				overflow: hidden;
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}

				text {
					flex: 1;
					font-size: 32rpx;
					color: #131313;
				}
			}
		}

	}

	.content {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 40rpx 90rpx;
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
			color: #131313;
		}

		.input {
			padding: 40rpx 0;
			border-bottom: 2rpx solid #EEEEEE;

			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
			}

			// .line {
			// 	width: 4rpx;
			// 	height: 64rpx;
			// 	background: #FD2A53;
			// }
			view {
				font-size: 32rpx;
				color: #333333;
				flex: 1;
			}

			#input-class {
				color: #666666;
			}
		}
	}
</style>